<!-- 运费模板添加&修改 -->
<template>
  <div>
    <!-- 添加弹框 -->
    <el-dialog
      :visible="showDialog"
      :title="showTitle"
      width="600px"
      @close="btnCancel"
    >
      <el-form
        ref="addform"
        style="margin-left: 50px;"
        :model="addform"
        :rules="rules"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select
            v-model="addform.templateType"
            placeholder="请选择模板类型"
            style="width:400px"
          >
            <el-option
              label="同城寄"
              :value="1"
            ></el-option>
            <el-option
              label="省内寄"
              :value="2"
            ></el-option>
            <el-option
              label="经济区互寄"
              :value="3"
            ></el-option>
            <el-option
              label="跨省"
              :value="4"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select
            v-model="addform.transportType"
            placeholder="请选择运送类型"
            style="width:400px"
          >
            <el-option
              label="普快"
              :value="1"
            ></el-option>
            <el-option
              label="特快"
              :value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联城市"
          prop="associatedCityList"
        >
          <el-checkbox-group v-model="addform.associatedCityList">
            <el-checkbox label="1">全国</el-checkbox>
            <el-checkbox
              :disabled="flag"
              label="2"
            >京津冀</el-checkbox>
            <el-checkbox
              :disabled="flag"
              label="3"
            >江浙沪</el-checkbox>
            <el-checkbox
              :disabled="flag"
              label="4"
            >川渝</el-checkbox>
            <el-checkbox
              :disabled="flag"
              label="5"
            >黑吉辽</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input
            v-model.number="addform.firstWeight"
            placeholder="请输入首重价格"
            style="width:400px;"
          >
            <i
              slot="suffix"
              class="dw"
            >元</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input
            v-model.number="addform.continuousWeight"
            placeholder="请输入续重价格"
            style="width:400px;"
          >
            <i
              slot="suffix"
              class="dw"
            >元</i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input
            v-model.number="addform.lightThrowingCoefficient"
            style="width:400px;"
            placeholder="请输入轻抛系数"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        style="margin-right:38%;
    "
      >
        <el-button
          type="danger"
          @click="btnok"
        >确定</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import {
  freightManageOperate

} from '@/api/transit'
export default {
  props: {
    showTitle: {
      type: String,
      required: true
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],

        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      },
      flag: false,
      addform: {
        templateType: null, // 模板类型
        transportType: null, // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: null, // 首重价格
        continuousWeight: null, // 续重价格
        lightThrowingCoefficient: null // 轻抛系数
      }
    }
  },
  watch: {
    'addform.associatedCityList'() {
      const res = this.addform.associatedCityList.some((item) => {
        return item === '1'
      })
      this.flag = res
      if (res) {
        if ((this.addform.associatedCityList.join('') === '1') === false) {
          this.addform.associatedCityList = ['1']
        }
      }
    }
  },
  methods: {
    // 添加数据
    btnok() {
      this.$refs.addform.validate(async isok => {
        if (isok) {
          // this.addform.associatedCityList =
          //   this.addform.associatedCityList instanceof Array
          //     ? this.addform.associatedCityList
          //     : this.lists(this.addform.associatedCityList)

          const res = await freightManageOperate(this.addform)
          console.log(res)
          if (res.code === 1) {
            this.$message.warning(res.msg)
          } else {
            if (this.showTitle === '新增模板') {
              this.$message.success('添加成功')
            } else {
              this.$message.success('编辑成功')
            }
          }
          this.btnCancel()
          this.$emit('random')
        }
      })
    },
    // 关闭
    btnCancel() {
      this.addform = {
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: '' // 轻抛系数
      }
      this.$refs.addform.resetFields()
      this.$emit('update:showDialog', false)
    },
    // 编辑回显数据
    async editRows(row) {
      const res = await freightManageOperate(row)
      // res.data.associatedCityList = this.list(res.data.associatedCityList)
      console.log('res', res)
      this.addform = { ... res.data }
    }

  }
}
</script>

